<template>
  <el-container style="padding: 20px">
    <el-header style="margin-bottom: 20px; font-size: 24px">任务管理</el-header>

    <!-- 任务列表 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="always" header="任务列表">
          <el-button type="primary" @click="openCreateMissionDialog">新建任务</el-button>
          <el-table :data="missions" style="width: 100%; margin-top: 10px"
                    highlight-current-row @current-change="handleMissionSelect">
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
            <el-table-column prop="published" label="是否发布" width="100">
              <template #default="{ row }">
                <el-tag :type="row.published ? 'success' : 'info'">{{ row.published ? '已发布' : '未发布' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link size="small" @click="editMission(row)">编辑</el-button>
                <el-button link size="small" @click="deleteMission(row.missionId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 步骤列表 -->
      <el-col :span="12">
        <el-card v-if="selectedMission" shadow="always" :header="`步骤管理 - ${selectedMission.title}`">
          <el-button type="primary" @click="openCreateStepDialog">新增步骤</el-button>
          <el-table :data="steps" style="width: 100%; margin-top: 10px">
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="description" label="内容" show-overflow-tooltip></el-table-column>
            <el-table-column prop="order" label="顺序" width="80"></el-table-column>
            <el-table-column prop="obsolete" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.obsolete ? 'danger' : 'success'">
                  {{ row.obsolete ? '已弃用' : '可用' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button link size="small" @click="editStep(row)">编辑</el-button>
                <el-button link size="small" @click="deleteStep(row.stepId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 创建或编辑任务对话框 -->
    <el-dialog v-model="showMissionDialog" :title="editingMission ? '编辑任务' : '新建任务'">
      <el-form ref="missionFormRef" :model="editingMission" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="editingMission.title" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editingMission.description" type="textarea" />
        </el-form-item>
        <el-form-item label="最大分数">
          <el-input-number v-model="editingMission.maxScore" />
        </el-form-item>
        <el-form-item label="持续时间(分钟)">
          <el-input-number v-model="editingMission.duration" />
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="editingMission.instructions" type="textarea" />
        </el-form-item>
        <el-form-item label="是否发布">
          <el-switch v-model="editingMission.published" />
        </el-form-item>
        <el-button type="primary" @click="saveMission">保存</el-button>
      </el-form>
    </el-dialog>

    <!-- 创建或编辑步骤对话框 -->
    <el-dialog v-model="showStepDialog" :title="editingStep ? '编辑步骤' : '新增步骤'">
      <el-form ref="stepFormRef" :model="editingStep" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="editingStep.title" />
        </el-form-item>
        <el-form-item label="内容描述">
          <el-input v-model="editingStep.description" type="textarea" />
        </el-form-item>
        <el-form-item label="配置数据">
          <el-input v-model="editingStep.configXml" type="textarea" />
        </el-form-item>
        <el-form-item label="顺序">
          <el-input-number v-model="editingStep.order" />
        </el-form-item>
        <el-button type="primary" @click="saveStep">保存</el-button>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from '@/utils/axios'

const missions = ref([])
const steps = ref([])
const selectedMission = ref(null)
const showMissionDialog = ref(false)
const showStepDialog = ref(false)
const editingMission = ref({})
const editingStep = ref({})

onMounted(() => {
  fetchMissions()
})

async function fetchMissions() {
  const res = await axios.get('/api/mission')
  missions.value = res.data
}

function handleMissionSelect(mission) {
  selectedMission.value = mission
  fetchSteps(mission.missionId)
}

async function fetchSteps(missionId) {
  const res = await axios.get(`/api/mission/${missionId}/steps`)
  steps.value = res.data
}

function openCreateMissionDialog() {
  editingMission.value = {
    title: '',
    description: '',
    maxScore: 0,
    duration: 0,
    instructions: '',
    published: false
  }
  showMissionDialog.value = true
}

function editMission(mission) {
  editingMission.value = { ...mission }
  showMissionDialog.value = true
}

async function saveMission() {
  if (editingMission.value.missionId) {
    await axios.post('/api/mission/updateMission', editingMission.value)
  } else {
    const res = await axios.post('/api/mission/create', editingMission.value)
    editingMission.value.missionId = res.data.missionId
    missions.value.push(editingMission.value)
  }
  showMissionDialog.value = false
  await fetchMissions()
}

async function deleteMission(id) {
  await axios.delete(`/api/mission/${id}`)
  await fetchMissions()
}

function openCreateStepDialog() {
  editingStep.value = {
    id:0,
    missionId: selectedMission.value.missionId,
    title: '',
    configXml: '',
    order: 1
  }
  showStepDialog.value = true
}

function editStep(step) {
  editingStep.value = { ...step }
  showStepDialog.value = true
}

async function saveStep() {
  if (editingStep.value.id) {
    await axios.post('/api/mission/updateStep', editingStep.value)
  } else {
    await axios.post('/api/mission/createStep', editingStep.value)
  }
  showStepDialog.value = false
  await fetchSteps(selectedMission.value.missionId)
}

async function deleteStep(stepId) {
  await axios.delete(`/api/mission/steps/${stepId}`)
  await fetchSteps(selectedMission.value.missionId)
}
</script>
